<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>幸运女神大抽奖</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
	<img class="logo" src="pic/logo2.png" />
</div>

<div class="control-panel">
    <button onclick="document.getElementById('logoUpload').click()" class="btn small-btn">更换LOGO</button>
    <input type="file" id="logoUpload" accept="image/*" style="display: none" onchange="changeLogo(event)">
    <button id="myBtn" onclick="openModal()" class="btn small-btn">录入名单</button>
    <button id="winnerListBtn" onclick="openWinnerList()" class="btn small-btn">中奖记录</button>
    <div class="input-group">
        <label>抽奖人数</label>
        <div class="number-control">
            <button onclick="decreasePersonCount()">-</button>
            <input type="number" id="personCount" value="1" min="1" max="15">
            <button onclick="increasePersonCount()">+</button>
        </div>
    </div>
    <div class="toggle-group">
        <label>信息显示控制</label>
        <button id="toggleAvatar" onclick="toggleInfo('avatar')" class="toggle-btn">显示头像</button>
		
        <button id="toggleLastname" onclick="toggleInfo('lastname')" class="toggle-btn">显示姓氏</button>
        <button id="toggleFirstname" onclick="toggleInfo('firstname')" class="toggle-btn">显示名字</button>
        <button id="toggleId" onclick="toggleInfo('id')" class="toggle-btn">显示工号</button>
		<span></span>
		<button id="oneAvatar"  onclick="updateOneWinnerAvatarDisplay()" class="toggle-btn">显示单个头像</button>
		<button id="oneFirstname"  onclick="updateOneWinnerNameDisplay()" class="toggle-btn">显示单个名字</button>
		<button id="OneId" onclick="updateOneWinnerIdDisplay()" class="toggle-btn">显示单个工号</button>
		<button id="toggleAll" onclick="toggleAll()" class="toggle-btn">全部显示</button>
    </div>
</div>

<button id="startBtn" onclick="playFun()" class="btn">开始抽奖</button>

<button id="stopBtn" onclick="stopFun()" class="btn">停止</button>

<div id="result" class="result"></div>
<div id="flicker" class="flicker"></div>

<!-- 录入名单模态框 -->
<div id="myModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <span class="modal-title">录入人员名单</span>
            <span class="close">&times;</span>
        </div>
        <div class="modal-body">
            <textarea id="personList" placeholder="请输入人员名单，每行格式为：姓名,工号,部门,头像文件名"></textarea>
        </div>
        <div class="modal-footer">
            <button onclick="savePersonList()" class="btn">保存</button>
        </div>
    </div>
</div>

<!-- 中奖记录模态框 -->
<div id="myModal1" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <span class="modal-title">中奖记录</span>
            <span class="close1">&times;</span>
        </div>
        <div class="modal-body">
            <textarea id="winnerList" readonly></textarea>
        </div>
        <div class="modal-footer">
            <button onclick="closeModal1()" class="btn">关闭</button>
        </div>
    </div>
</div>

<script src="js/lottery.js"></script>
</body>
</html>